<template>
   <div class="bar-wrapper" >
        <my-div class="bar-wrapper" :class="[isIpx?'w-ipx':'']">
            <div class="bar-item" @click="tabTo(0)">
                <image style="width:40px;height:40px;" :src="`root:img/${theme}/home/${pIndexKey===0?'home-in@2x.png':'home@2x.png'}`"></image>
                <text class="bar-txt" :class="[this.isActive(0)]">新闻</text>
            </div>
            <div class="bar-item" @click="tabTo(1)">
                <image style="width:40px;height:40px;"  :src="`root:img/${theme}/home/${pIndexKey===1?'zichan-in@2x.png':'zichan@2x.png'}`"></image>            
                <text class="bar-txt" :class="[this.isActive(1)]">资产</text>
            </div>
            <div class="bar-item" @click="tabTo(2)">
                <image style="width:40px;height:40px;" :src="`root:img/${theme}/home/${pIndexKey===2?'jiaoyi-in@2x.png':'jiaoyi@2x.png'}`"></image>
                <text class="bar-txt" :class="[this.isActive(2)]">公告</text>
                <!-- <text class="notice-dot"></text> -->
            </div>
           
            <!-- <div class="bar-item" @click="tabTo(3)">
                <image style="width:40px;height:40px;" :src="`root:img/${theme}/home/${pIndexKey===3?'wode-in@2x.png':'wode@2x.png'}`"></image>            
                <text class="bar-txt" :class="[this.isActive(3)]">交易</text>
            </div>
            <div class="bar-item" @click="tabTo(4)">
                <image style="width:40px;height:40px;" :src="`root:img/${theme}/home/${pIndexKey===4?'faxian-in@2x.png':'faxian@2x.png'}`"></image>            
                <text class="bar-txt" :class="[this.isActive(4)]">发现</text>
            </div> -->
        </my-div>
   </div>
</template>
<style scoped>
    .bar-wrapper{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-around;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    .w-ipx{
        height: 140px;
    }
    .bar-item{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .bar-txt,.bar-ic{
        color:rgba(153,153,153,1);
        text-align: center;
    }
    .day-active{
        color:rgba(70,120,245,1);
    }
    .night-active{
        color:rgba(184,111,36,1);
    }
    .bar-ic{
        padding-top: 18px;
        font-size: 38px;
    }
    .bar-txt{
        font-size: 22px;
        padding-top: 2px;
    }
    .i-notice{
        position: absolute;
        top:10px;
        right: 30px;
        height: 30px;
        width: 30px;
        border-radius: 100%;
        font-size: 26px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        background-color: #f00;
    }
    .notice-dot{
        position: absolute;
        top:15px;
        right: 40px;
        height: 15px;
        width: 15px;
        border-radius: 100%;
        background-color: #f00;
    }
</style>
<script>

    var modal = weex.requireModule('modal');
    const env = weex.requireModule('env')
    export default {
        props:{
            pIndexKey:{
                default:0
            }
        },
        data () {
            return {
                isIpx:env.isFringeScreen(),
                
            }
        },
        methods: {
            isActive:function (_c) {
                if(this.pIndexKey == _c && this.theme === 'day' ){
                    return 'day-active'
                }
                if(this.pIndexKey == _c && this.theme === 'night'){
                    return 'night-active'
                }
            },
            tabTo(_key){
                if(this.pIndexKey == _key) return;
                this.$emit('tabTo',{
                    status : 'tabTo',
                    data : {
                        key : _key
                    }
                })
            },

        }
    }
</script>
